<style lang="scss" scoped>
.remark-content {
  border-bottom: 2upx solid #f0f2f5;
  .remark-title {
    font-size: 28upx;
    color: $f303133;
    margin-bottom: 32upx;
  }
  .remark_textarea-warp {
    position: relative;
    .remark_textarea-el {
      font-size: 28upx;
      color: $f303133;
      width: 100%;
      height: 100%;
    }
    .remark_length {
      position: absolute;
      bottom: 32upx;
      right: 0;
      font-size: 32upx;
      color: $f909399;
    }
  }

  /deep/.placeholder-class {
    font-size: 28upx;
    color: $f909399;
  }
}
</style>
<template>
  <view class="remark-content">
    <view class="remark-title" v-if="title">{{ title }} </view>
    <view
      class="remark_textarea-warp"
      :style="{ height: height, width: width }"
    >
      <textarea
        class="remark_textarea-el"
        :placeholder="placeholder"
        placeholder-class="placeholder-class"
        :value="defaultValue"
        @input="changeInput"
        :maxlength="maxLength"
        @oninput="check"
      ></textarea>
      <view class="remark_length">
        {{ defaultValue.length }}/{{ maxLength }}</view
      >
    </view>
  </view>
</template>

<script lang="ts">
import Vue from "vue";
import { Component, Prop, Watch } from "vue-property-decorator";
@Component
export default class Index extends Vue {
  @Prop({ type: String }) value;
  @Prop({ type: String, default: "" }) title;
  @Prop({ type: Number, default: 50 }) maxLength;
  @Prop({ type: String, default: "请输入" }) placeholder;
  @Prop({ type: String, default: "100%" }) width;
  @Prop({ type: String, default: "278rpx" }) height;

  defaultValue: string | number = "";

  @Watch("value")
  WatchValue() {
    this.defaultValue = this.value;
  }
  check(e: any) {
    if (e.target.value.length > this.maxLength) {
      e.target.value = e.target.value.slice(0, this.maxLength);
    }
  }
  changeInput(e: any) {
    this.$emit("input", e.target.value);
    this.$emit("change", e.target.value);
  }
}
</script>
